@import "../../../styles/base.scss";

.user-info {
  width: 686px;
  padding: 24px 32px;
  background-color: #fff;

  .user-login-info {
    @include wh(100%, 100px);

    .user-info-avator {
      display: inline-block;
      margin-right: 16px;
      @include wh(100px, 100px);

      .user-info-avator-image {
        display: block;
        @include wh(100px, 100px);
        border-radius: 50%;
      }
    }

    .user-info-txt {
      display: inline-block;
      @include wh(570px, 96px);
      padding-top: 4px;
      vertical-align: top;

      .user-info-txt-name {
        @include sc(34px, #000);
        line-height: 48px;
      }

      .user-info-txt-phone {
        @include sc(28px, $font-color-gray);
        line-height: 40px;
        margin-top: 4px;
      }

      .user-info-txt-phone-btn {
        @include wh(140px, 40px);
        @include sc(28px, $theme-color);
        border: none;
        outline: medium;
        background-color: transparent;
        line-height: 40px;
        padding: 0;
        float: left;

        &::after {
          border: none;
          outline: medium;
          background-color: transparent;
        }
      }
    }
  }

  .user-register-info {
    @include wh(100%, 100px);

    .user-register-avator {
      display: inline-block;
      margin-right: 16px;
      @include wh(100px, 100px);

      .user-register-avator-image {
        display: block;
        @include wh(100px, 100px);
        border-radius: 50%;
      }
    }

    .user-register-txt {
      display: inline-block;
      @include wh(570px, 96px);
      padding-top: 4px;
      vertical-align: top;

      .user-register-txt-name {
        @include sc(34px, $font-color-gray);
        line-height: 48px;
      }

      .user-register-txt-btn {
        @include wh(112px, 40px);
        @include sc(28px, $theme-color);
        padding: 0;
        border: none;
        outline: medium;
        background-color: transparent;
        line-height: 40px;
        float: left;

        &::after {
          border: none;
          outline: medium;
          background-color: transparent;
        }
      }
    }
  }

  .user-account-info {
    width: 100%;
    padding: 32px 0;
    margin-top: 17px;
    @include fj();

    .user-account-info-item {
      flex: 1;
      text-align: center;
      position: relative;

      &:not(:last-of-type) {
        &::after {
          display: block;
          position: absolute;
          content: '';
          @include wh(2px, 24px);
          background-color: $border-color-base;
          right: 0;
          top: 50%;
          margin-top: -12px;
        }
      }

      .user-account-info-item-name {
        @include sc(24px, $font-color-gray);
        margin-right: 17px;
        line-height: 33px;
        vertical-align: middle;
      }

      .user-account-info-item-value {
        @include sc(36px, #000);
        line-height: 66px;
        vertical-align: middle;

        .unit {
          font-size: 22px;
        }

        &.active {
          color: $theme-color;
        }
      }
    }
  }
}

.order-tab {
  width: 644px;
  padding: 32px 21px 64px;
  margin: 32px auto 48px;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0px 3px 12px 0px rgba(82, 22, 26, 0.15);

  .order-tab-title {
    .order-tab-icon {
      @include wh(40px, 40px);
      vertical-align: middle;
    }

    .order-tab-txt {
      line-height: 36px;
      vertical-align: middle;
      @include sc(32px, #000);
      margin-left: 21px;
    }
  }

  .order-tab-items {
    margin-top: 30px;
    padding-top: 16px;
    @include fj();
    text-align: center;

    .order-tab-item {
      flex: 1;
      background: transparent;

      .order-tab-item-icon {
        @include wh(40px, 40px);
      }

      .order-tab-item-txt {
        @include sc(28px, $font-color-regular);
        line-height: 40px;
      }
    }
  }
}

.action-item {
  @include wh(686px, 45px);
  padding: 26px 0 25px;
  background-color: #fff;
  margin: 0 auto;
  @include fj();

  .action-item-left {
    flex: 1;
    vertical-align: middle;

    .action-item-label-icon {
      vertical-align: middle;
      @include wh(36px, 36px);
    }

    .ction-item-txt-icon {
      vertical-align: middle;
    }

    .action-item-label {
      vertical-align: middle;
      @include sc(32px, #000);
      margin-left: 16px;
    }
  }

  .action-item-right {
    flex: 1;
    text-align: right;
    vertical-align: middle;

    .action-item-value {
      @include sc(28px, $font-color-gray);
    }

    .action-contact-btn {
      @include wh(100%, 45px);
      line-height: 45px;
      text-align: right;
      padding: 0;
      background-color: transparent;
      border: none;
      outline: medium;

      &::after {
        background-color: transparent;
        border: none;
        outline: medium;
      }
    }
  }

  &:last-of-type {
    border-bottom: 1px solid #e4e4e4;
  }
}